<template>
    <div class="box">
        <div class="title">不满意次数</div>
        <v-chart :option="option" autoresize class="charts"></v-chart>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    props: ["data"],
    watch: {
        data: {
            deep: true,
            handler() {
                this.option.series[0].data = this.data.value
                this.option.xAxis.data = this.data.name
            },
        }
    },
    data() {
        return {
            option: {
                grid: {
                    top: "10%",
                    bottom: "30%"

                },
                xAxis: {
                    // data: ['路面坑洞', '跳车', '路面积水', '安全防护设施缺失', '标线不清楚', '交通标志标牌缺失', '其他'],
                    data: [],
                    axisLabel: {
                        interval: 0,
                        formatter: function (value, index) {
                            var newParamsName = "";
                            var paramsNameNumber = value.length;
                            var provideNumber = 3;  //一行显示几个字
                            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                            if (paramsNameNumber > provideNumber) {
                                for (var p = 0; p < rowNumber; p++) {
                                    var tempStr = "";
                                    var start = p * provideNumber;
                                    var end = start + provideNumber;
                                    if (p == rowNumber - 1) {
                                        tempStr = value.substring(start, paramsNameNumber);
                                    } else {
                                        tempStr = value.substring(start, end) + "\n";
                                    }
                                    newParamsName += tempStr;
                                }
                            } else {
                                newParamsName = value;
                            }
                            return `\n${newParamsName}`
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#222"
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: "(次数)",
                },
                series: [
                    {
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: "rgba(211,91,248,.2)",
                        },
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#D35BF8' },
                                { offset: 1, color: '#9417E5' }
                            ]),
                            borderRadius: 15
                        },
                        barWidth: 20,
                        // data: [220, 182, 191, 234, 290, 330, 310,],
                        data: [],
                        label: {
                            show: true,
                            position: 'top',

                        },

                    }
                ]
            }
        }
    },
    mounted() {
        this.option.series[0].data = this.data.value
        this.option.xAxis.data = this.data.name
    }
}
</script>

<style scoped>
.box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}
.title {
    width: 10rem;
    writing-mode: vertical-rl;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #b93cf6;
    display: flex;
    justify-content: center;
    align-items: center;
}
.charts {
    width: 100%;
    height: 100%;
}
</style>